<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <!-- 3.使用组件 -->
    <!-- 子组件自定义事件 -->
    <TodoHeader
    @create="addFn"
    :arr="list"
    ></TodoHeader>
    <TodoMain :arr="list" 
    @del="delfn"
    ></TodoMain>
    <TodoFooter 
    :arr="showList"
    @changeType="typeFn"
    :type="getSel"
    :getSum=showList.length
     @clearTask="clearFn"
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
// 1.引入组件
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

//2. 注册组件
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data(){
    return{
      list: JSON.parse(localStorage.getItem("todoList"))||[],
      getSel:"all" //all 表示显示全部 yes 表示已完成 no 表示未完成
    }
  },
    computed: {
    // 计算属性 依赖于其他得来的结果
    showList(){
      // 如果是 yes已完成 把完成的筛选出来 返回
      if(this.getSel==="yes"){
        return this.list.filter(item=>item.isDone)
        // // 如果是 no未完成 把未完成的筛选出来 返回
      }else if(this.getSel==="no"){
        return this.list.filter(item=> !item.isDone)
      }else{
        // 否则·显示全部
        return this.list
      }
    }
  },
  methods:{
    // 1.添加任务
    addFn(taskName){
      // 把从子组件的值 从新推给list
     this.list.push({
       id:this.list.length?this.list.at(-1).id+1:100,  //判断当前数组是否为空 为空就为100
       name:taskName,
       isDone:false
     })
    },
    // 2.删除任务
    delfn(id){
      // 根据id过滤到当前项
      this.list=this.list.filter(obj=>obj.id !==id)
    },
    // 3.数据切换
    typeFn(type){
      this.getSel=type
    },
    // 4.清空以完成 filter过滤掉 没有选中的
    clearFn(){
      this.list=this.list.filter(item=> !item.isDone)
    }

  },
  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem("todoList", JSON.stringify(this.list))
      }
    }
  }

};
</script>